<template>
  <div class="body_">
    <div class="left">
      <div class="left_top">
        <div class="Title">设备信息</div>
        <div class="Tree">
          <el-input
            class="queryBtn_"
            placeholder="输入关键字进行过滤"
            v-model="queryFrom.DeviceName_"
          >
          </el-input>
        </div>
      </div>
      <div class="left_bottom">
        <div class="Title">标记</div>
        <div class="content">
          <el-select
            class="queryBtn_"
            v-model="queryFrom.DeviceType"
            placeholder="请选择设备类型"
          >
            <el-option
              v-for="item in DeviceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            class="queryBtn_"
            v-model="queryFrom.DataTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <el-button type="primary" class="queryBtn_">查询</el-button>
        </div>
      </div>
    </div>
    <div id="Video" class="right"></div>
    <div v-show="ShowControl" class="Control">
      <el-button>加速</el-button>
      <el-button>减速</el-button>
    </div>
  </div>
</template>

<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import "../../../../public/h5player/h5player.min";
export default {
  directives: { permission },
  mounted() {
    this.initPlayer();
  },
  data() {
    return {
      ShowControl: false,
      queryFrom: {
        DeviceType: "",
        DataTime: [],
        DeviceName_: "",
      },

      DeviceTypeOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
      ],
    };
  },
  methods: {
    //   初始化播放器
    initPlayer() {
      this.player = new window.JSPlugin({
        // 需要英文字母开头 必填
        szId: "Video",
        // 必填,引用H5player.min.js的js相对路径
        szBasePath: "/h5player/",
        iMaxSplit: 1,
        iCurrentSplit: 1,
      });
      this.initPlugin();
    },
    initPlugin() {
      let that = this;
      this.player.JS_SetWindowControlCallback({
        windowEventSelect(iWindIndex) {
          // 插件选中窗口回调
          console.log("windowSelect callback: ", iWindIndex);
        },
        pluginErrorHandler(iWindIndex, iErrorCode, oError) {
          // 插件错误回调
          console.error(
            `window-${iWindIndex}, errorCode: ${iErrorCode}`,
            oError
          );
        },
        windowEventOver(iWindIndex) {
          // 鼠标移过回调
        },
        windowEventOut(iWindIndex) {
          // 鼠标移出回调
        },
        windowFullCcreenChange(bFull) {
          // 全屏切换回调
        },
        firstFrameDisplay(iWndIndex, iWidth, iHeight) {
          // 首帧显示回调
        },
        performanceLack(iWndIndex) {
          // 性能不足回调
        },
      });
      this.play();
    },
    play() {
      let preUrl = this.preUrl; // 播放地址
      const param = {
        playURL: this.preUrl,
        // 1：高级模式  0：普通模式，高级模式支持所有
        mode: 0,
      };
      // 当前播放窗口下标
      let index = 0;
      this.player.JS_Play(preUrl, param, index).then(
        () => {
          // 播放成功回调
          console.log("播放成功");
        },
        (err) => {
          console.log("播放失败");
          console.info("JS_Play failed:", err);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.body_ {
  overflow: hidden;
  padding-top: 0.2625rem;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  height: 44vw;
  display: flex;
  .left {
    width: 4.5rem;
    height: 100%;

    display: flex;
    flex-direction: column;
    .left_top {
      flex: 1;
      display: flex;
      flex-direction: column;
      .Title {
        color: #050505;
        font-size: 0.3rem;
        font-weight: 600;
        height: 0.5rem;
        width: 100%;
        line-height: 0.5rem;
        background: #e5e6e8;
      }
      .Tree {
        flex: 1;
        overflow-y: auto;
        .queryBtn_ {
          width: 100% !important;
          margin: 0.0625rem 0;
        }
      }
    }
    .left_bottom {
      flex: 1;
      display: flex;
      flex-direction: column;
      .Title {
        color: #050505;
        font-size: 0.2rem;
        font-weight: 600;
        height: 0.5rem;
        width: 100%;
        line-height: 0.5rem;
        background: #e5e6e8;
      }
      .content {
        .queryBtn_ {
          width: 100% !important;
          margin-top: 0.0625rem;
        }
      }
    }
  }
  .right {
    flex: 1;
    height: 100%;
    background: #611d78;
  }
  .Control {
    position: absolute;
    text-align: center;
    line-height: 1rem;
    border-radius: 20px;
    top: 0.4rem;
    left: 5rem;
    width: 200px;
    height: 1rem;
    background-color: rgba(97, 95, 95, 0.5);
  }
}
::v-deep .el-date-editor .el-range-input {
  width: 60% !important;
}
</style>
